<template>
  <div>
    <input type="text" v-model="count" @blur="change" />
    <input type="text" v-model="price" />
    <input type="text" v-model="num" />
    总价：{{ total }}
  </div>
</template>

<script setup>
/**
 * data()，--->使用ref来定义变量
 * methods--->使用函数表达式
 * comput --->使用computed函数
 * watch--->使用watch函数
 * created()-->create,mount,update destory,共8个钩子函数，常用的是created，mounted
 * mounted()-->setup函数默认是created
 * props-->父传子 defineProps()
 * components-->注册子组件，默认自动注册，这个选项在组合式api中可以直接删除
 */
import { ref, computed, watch } from 'vue'

let count = ref(10)
let price = ref(10.2)
let num = ref(12)
const change = () => {
  console.log(count.value)
}
const total = computed(() => {
  return price.value * num.value
})
watch(price, (newV, oldV) => {
  console.log(newV, oldV)
})
</script>

<style lang="scss" scoped></style>
